<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style='marginBottom:10px'>
        <el-breadcrumb-item
          ><i class="el-icon-location-outline" />
          &nbsp;&nbsp;&nbsp;当前位置</el-breadcrumb-item
        >
        <el-breadcrumb-item  @click.native="cancel" style="cursor:pointer"
          >入职/新增</el-breadcrumb-item
        >
        <el-breadcrumb-item
          >单个新增员工</el-breadcrumb-item
        > 
      </el-breadcrumb>
    </div>
    <div class="addstaff st">
      <div class="sm">新增企业员工</div>
      <div class="tx"></div>
      <div class="top-right">
        <el-checkbox v-model="checked"></el-checkbox>
        <span>邀请同事填写入职登记表</span>
      </div>
      <ul class="addstaff-list">
        <li>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="right"
            hide-required-asterisk
          >
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="ruleForm.phone"
                maxlength="11"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司" prop="company">
              <el-input
                v-model="ruleForm.company"
                placeholder="请输入公司"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="branch">
              <el-input
                v-model="ruleForm.branch"
                placeholder="请输入所属部门"
              ></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="position">
              <el-input
                v-model="ruleForm.position"
                placeholder="请输入职位"
              ></el-input>
            </el-form-item>
            <el-form-item label="工作状态" prop="condition">
              <el-select v-model="ruleForm.condition" placeholder="请选择状态">
                <el-option
                  v-for="v in conditionList"
                  :value="v.value"
                  :key="v.value"
                  :label="v.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份" prop="condit1ion">
              <el-select v-model="ruleForm.condition" placeholder="请选1择状态">
                <el-option
                  v-for="v in conditionList"
                  :value="v.value"
                  :key="v.value"
                  :label="v.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职时间" prop="entryTime">
              <el-date-picker
                v-model="ruleForm.entryTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="司龄" prop="foliarAge">
              <el-input
                v-model="ruleForm.foliarAge"
                placeholder="请输入司龄"
              ></el-input>
            </el-form-item>
            <el-form-item label="工作地点" prop="workplace">
              <el-input
                v-model="ruleForm.workplace"
                placeholder="请输入工作地点"
              ></el-input>
            </el-form-item>
            <el-form-item label="合同开始时间" prop="compactStartTime">
              <el-date-picker
                v-model="ruleForm.compactStartTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="合同结束时间" prop="compactEndTime">
              <el-date-picker
                v-model="ruleForm.compactEndTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="合同期限" prop="compactLimit">
              <el-input
                v-model="ruleForm.compactLimit"
                placeholder="请输入合同期限"
              ></el-input>
            </el-form-item>
            <el-form-item label="合同类型" prop="compactType">
              <el-select
                v-model="ruleForm.compactType"
                placeholder="请选择类型"
              >
                <el-option
                  v-for="v in compactTypeList"
                  :value="v.value"
                  :key="v.value"
                  :label="v.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合同次数" prop="compactNumber">
              <el-input
                v-model="ruleForm.compactNumber"
                placeholder="请输入合同次数"
              ></el-input>
            </el-form-item>
            <el-form-item label="用工形式" prop="employmentForm">
              <el-select
                v-model="ruleForm.employmentForm"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="v in employmentFormList"
                  :value="v.value"
                  :key="v.value"
                  :label="v.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号" prop="idNumber">
              <el-input
                v-model="ruleForm.idNumber"
                maxlength="18"
                placeholder="请输入身份证号"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthTime">
              <el-date-picker
                v-model="ruleForm.birthTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input
                v-model="ruleForm.age"
                maxlength="3"
                placeholder="请输入年龄"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="ruleForm.sex" placeholder="请选择状态">
                <el-option value="man" label="男"></el-option>
                <el-option value="nv" label="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="民族" prop="nation">
              <el-input
                v-model="ruleForm.nation"
                placeholder="请输入民族"
              ></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input
                v-model="ruleForm.nativePlace"
                placeholder="请输入籍贯"
              ></el-input>
            </el-form-item>
            <el-form-item label="通讯住址" prop="mailing">
              <el-input
                v-model="ruleForm.mailing"
                placeholder="请输入通讯住址"
              ></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人" prop="emergencyContact">
              <el-input
                v-model="ruleForm.emergencyContact"
                placeholder="请输入紧急联系人"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactNumber">
              <el-input
                v-model="ruleForm.contactNumber"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="education">
              <el-input
                v-model="ruleForm.education"
                placeholder="请输入学历"
              ></el-input>
            </el-form-item>
            <el-form-item label="专业" prop="domain">
              <el-input
                v-model="ruleForm.domain"
                placeholder="请输入专业"
              ></el-input>
            </el-form-item>
            <el-form-item label="毕业院校" prop="graduateInstitutions">
              <el-input
                v-model="ruleForm.graduateInstitutions"
                placeholder="请输入毕业院校"
              ></el-input>
            </el-form-item>
            <el-form-item label="银行卡号" prop="creditCard">
              <el-input
                v-model="ruleForm.creditCard"
                maxlength="19"
                placeholder="请输入银行卡号"
              ></el-input>
            </el-form-item>
            <el-form-item label="社保号" prop="socialSecurity">
              <el-input
                v-model="ruleForm.socialSecurity"
                maxlength="11"
                placeholder="请输入社保号"
              ></el-input>
            </el-form-item>
            <el-form-item label="离职时间" prop="dimissionTime">
              <el-date-picker
                v-model="ruleForm.dimissionTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="离职原因" prop="dimissionCause">
              <el-input
                v-model="ruleForm.dimissionCause"
                placeholder="请输入离职原因"
              ></el-input>
            </el-form-item>
            <el-button type="warning" @click="submitForm('ruleForm', 0)"
              >保存</el-button
            >
            <el-button type="primary" @click="submitForm('ruleForm', 1)"
              >保存并继续添加</el-button
            >
            <el-button @click="cancel">取消</el-button>
          </el-form>
        </li>
        <li class="addstaff-phone">
          <img style="width: 100%" src="../../../assets/home/rz-phone.jpg" />
        </li>
      </ul>
      <el-dialog :visible.sync="dialogVisible" width="375px" class="tc">
        <ul>
          <li class="t-img">
            <img src="../../../assets/home/rz_tixiang.png" />
          </li>
          <li class="t-title">是否邀请员工完善个人档案?</li>
          <li class="t-text">员工会收到工作通知的消息推送</li>
        </ul>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
          <el-button @click="concel">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  props: ["changeAddStaff",'goPath'],
  data() {
    return {
      ruleForm: {
        name: "", //姓名
        phone: "", //手机号码
        company: "", //公司
        branch: "", //所属部门
        position: "", //职位
        condition: "", //工作状态
        entryTime: "", //入职时间
        age: "", //年龄
        workplace: "", //工作地点
        compactStartTime: "", //合同开始时间
        compactEndTime: "", //合同结束时间
        compactLimit: "", //合同期限
        compactType: "", //合同类型
        employmentForm: "", //用工形式
        sex: "", //性别
        compactNumber: "", //合同次数
        idNumber: "", //身份证号码
        birthTime: "", //出生日期
        nation: "", //民族
        nativePlace: "", //籍贯
        mailing: "", //通讯住址
        emergencyContact: "", //紧急联系人
        contactNumber: "", //联系电话
        education: "", //学历
        domain: "", //专业
        graduateInstitutions: "", //毕业院校
        creditCard: "", //银行卡号
        socialSecurity: "", //社保号
        dimissionTime: "", //离职时间
        dimissionCause: "", //离职原因
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        company: [{ required: true, message: "请输入公司", trigger: "blur" }],
        branch: [
          { required: true, message: "请输入所属部门", trigger: "blur" },
        ],
        position: [{ required: true, message: "请输入职位", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        workplace: [
          { required: true, message: "请输入工作地点", trigger: "blur" },
        ],
        compactLimit: [
          { required: true, message: "请输入期限", trigger: "blur" },
        ],
        compactNumber: [
          { required: true, message: "请输入合同次数", trigger: "blur" },
        ],
        idNumber: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
        ],
        foliarAge: [{ required: true, message: "请输入司龄", trigger: "blur" }],
        nation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        nativePlace: [
          { required: true, message: "请输入籍贯", trigger: "blur" },
        ],
        mailing: [
          { required: true, message: "请输入通讯住址", trigger: "blur" },
        ],
        emergencyContact: [
          { required: true, message: "请输入紧急联系人", trigger: "blur" },
        ],
        contactNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        education: [{ required: true, message: "请输入学历", trigger: "blur" }],
        domain: [{ required: true, message: "请输入专业", trigger: "blur" }],
        dimissionCause: [
          { required: true, message: "请输入原因", trigger: "blur" },
        ],
        graduateInstitutions: [
          { required: true, message: "请输入毕业院校", trigger: "blur" },
        ],
        creditCard: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
        socialSecurity: [
          { required: true, message: "请输入社保号", trigger: "blur" },
        ],
        condition: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
        entryTime: [
          { required: true, message: "请选择入职时间", trigger: "change" },
        ],
        compactEndTime: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
        compactStartTime: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
        compactType: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        employmentForm: [
          { required: true, message: "请选择形式", trigger: "change" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        birthTime: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
        dimissionTime: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
      },
      conditionList: [
        //工作状态列表
        { value: "在职", lable: "zaizhi" },
        { value: "离职", lable: "lizhi" },
      ],
      compactTypeList: [
        //合同类型
        { value: "1好", lable: "zaizhi" },
        { value: "2职", lable: "lizhi" },
      ],
      employmentFormList: [
        //用工形式
        { value: "用1号", lable: "zaizhi" },
        { value: "用2号", lable: "lizhi" },
      ],
      checked: false, //是否邀请同事填写登记表
      dialogVisible: false, //
    };
  },
  watch: {
    checked(val, old) {
      if (val) {
        this.dialogVisible = true;
      }
    },
  },
  methods: {
    submitForm(formName, type) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (type) {
            this.clearValue(this.ruleForm);
            this.$message.success("已保存成功,可以继续添加！");
          } else {
            this.$message.success("添加成功！");
          }
        } else {
          this.$message.error("请按要求填写！");
          return false;
        }
      });
    },
    //返回上一级页面
    // changePage(){
    //   this.goPath(0)
    // },
    //取消返回上一级
    cancel(formName) {
      this.changeAddStaff(false);
    },
    isDialogVisible() {
      this.dialogVisible = true;
    },
    //弹窗确定按钮
    confirm() {
      this.dialogVisible = false;
      this.checked = false;
      this.$message.success("已成功邀请");
    },
    //弹窗取消按钮
    concel() {
      this.dialogVisible = false;
      this.checked = false;
    },
    //清空对象里面的值
    clearValue(obj) {
      Object.keys(obj).forEach((key) => {
        if (typeof obj[key] == "object") {
          this.clearValue(obj[key]);
        } else {
          obj[key] = "";
        }
      });
    },
  },
};
</script>

<style>
</style>